import React, { Component } from 'react';
/* 
    高阶组件-反向继承-条件渲染
*/
class Req extends Component {
    render() {
        return (
            <div>
                请求组件
            </div>
        );
    }
}
let LoadingDemo=HigherOrderComponent(Req)
class Tesing extends Component {
    state={
        loading:true
    }
    componentDidMount(){
        // 假设发送网络请求
        setTimeout(()=>{
            this.setState({
                loading:false
            })
        },3000)
    }
    render() {
        return (
            <div>
                <h1>Tesing组件</h1>
                <LoadingDemo loading={this.state.loading}></LoadingDemo>
            </div>
        );
    }
}
function HigherOrderComponent(WrappedComponent){
    return class ReqEvent extends WrappedComponent{
        render (){
            if(this.props.loading){
                return <div>loading....</div>
            }else{
                return super.render();
            }
        }
    }
}


export default Tesing;